<template>
    <div>
        <Spin fix v-if="ifSpin">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>附件生成中</div>
        </Spin>
        <Form :label-width="100" ref="formInline" :model="formInline">
            <Row :gutter="16" class="query-form2">
                <i-col span="8">
                    <FormItem label="单位名称：">
                        <Input v-model="formInline.productionOrgName" placeholder="请输入公司名称"/>
                    </FormItem>
                </i-col>
                <i-col span="8">
                    <FormItem label="总监姓名：">
                        <Input v-model="formInline.userName" placeholder="请输入总监姓名"/>
                    </FormItem>
                </i-col>
                <i-col span="8">
                    <div style="float: right;">
                        <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                        <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                    </div>
                </i-col>
            </Row>
        </Form>
        <Row type="flex" justify="start" class="query-form">
            <i-col>
                <Button icon="md-add" class="ivu-btn-add" @click="addInfo">新增</Button>
            </i-col>
            <i-col>
                <Button icon="md-cloud-download" class="ivu-btn-add" @click="exportExcel">导出</Button>
            </i-col>
            <i-col>
                <Button icon="md-cloud-download" class="ivu-btn-add" @click="batchFile">批量下载</Button>
            </i-col>
        </Row>
        <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="columns"
               no-data-text="没有查询到相关数据！"
               :data="infos" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>
        <Row type="flex" justify="end">
            <i-col>
                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </i-col>
        </Row>
        <Modal v-model="modal1" width="800" :mask-closable="false" :title="'企业安全总监登记' + titleName">
            <div :style="{height: divHeight, overflowY: 'auto', overflowX: 'hidden'}">
                <Form ref="formCustom" :model="formData" :rules="ruleCustom" label-position="top">
                    <Row :gutter="16">
                        <i-col span="18">
                            <Row :gutter="16">
                                <i-col span="24">
                                    <FormItem label="单位名称：" prop="orgName">
                                        <Input type="text" v-model="formData.securityDirectorInfo.orgName" readonly/>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="12">
                                    <FormItem label="姓名：" prop="userName">
                                        <Input type="text" v-model="formData.securityDirectorInfo.userName" readonly/>
                                    </FormItem>
                                </i-col>
                                <i-col span="12">
                                    <FormItem label="性别：" prop="gender">
                                        <Input type="text" v-model="formData.securityDirectorInfo.gender" readonly/>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="12">
                                    <FormItem label="政治面貌：" prop="politicalAffiliation">
                                        <Input type="text"
                                               v-model="formData.securityDirectorInfo.politicalAffiliationName"
                                               readonly/>
                                    </FormItem>
                                </i-col>
                                <i-col span="12">
                                    <FormItem label="出生年月：" prop="birthday">
                                        <DatePicker v-model="formData.securityDirectorInfo.birthday" type="date"
                                                    placeholder="请选择出生年月" style="width: 100%" readonly></DatePicker>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="12">
                                    <FormItem label="手机号码：" prop="phoneNumber">
                                        <Input type="text" v-model="formData.securityDirectorInfo.phoneNumber"
                                               readonly/>
                                    </FormItem>
                                </i-col>
                                <i-col span="12">
                                    <FormItem label="学历：" prop="education">
                                        <Input type="text" v-model="formData.securityDirectorInfo.educationName"
                                               readonly/>
                                    </FormItem>
                                </i-col>
                            </Row>

                        </i-col>
                        <i-col span="6">
                            <div style="width:100%;  height: 100%;">
                                <img :src="fileImgSrc" style="width:100%; height:100%"/>
                            </div>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="专业：" prop="major">
                                <Input type="text" v-model="formData.securityDirectorInfo.major" placeholder="请输入专业"
                                       readonly/>
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="现职务（岗位）：" prop="currentPosition">
                                <Input type="text" v-model="formData.securityDirectorInfo.currentPosition"
                                       placeholder="请输入现职务（岗位）" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="工作年限：" prop="workYear">
                                <Input type="number" v-model="formData.securityDirectorInfo.workYear"
                                       placeholder="请输入工作年限" readonly/>
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="现职务（岗位）工作年限：" prop="currentPositionWorkYear">
                                <Input type="number" v-model="formData.securityDirectorInfo.currentPositionWorkYear"
                                       placeholder="现职务（岗位）工作年限" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="与安全生产管理相关的工作年限：" prop="relevantWorkYear">
                                <Input type="number" v-model="formData.securityDirectorInfo.relevantWorkYear"
                                       placeholder="请输入与安全生产管理相关的工作年限" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="注册安全工程师职业资格证书编号：" prop="safetyEngineerQualificationCertificateNo">
                                <Input v-model="formData.safetyEngineerQualificationCertificateNo"
                                       placeholder="请输入注册安全工程师职业资格证书编号，如果没有证书，可以填写无"/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="注册安全工程师职业资格证书：">
                                <Upload
                                        multiple
                                        ref="qualificationUpload"
                                        type="drag"
                                        name="files"
                                        :show-upload-list="false"
                                        :before-upload="beforeUpload"
                                        :action="fileUrl">
                                    <div style="padding: 20px 0">
                                        <Icon type="ios-cloud-upload" size="52" style="color: #F27874"></Icon>
                                        <p><span style="color: red">*</span>&nbsp;注册安全工程师职业资格证书</p>
                                    </div>
                                </Upload>
                                <div v-show="fileList.length>0" v-for="item in fileList" :key='item'
                                     style="margin: 3px">
                                    <a @click="downloadFile(item)">{{ item.fileName }} {{ item.name }}</a>
                                    <Button type="text" icon="md-trash" @click="remove1(item)"
                                            style="margin-left: 5px;margin-bottom: 3px"/>
                                </div>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="注册安全工程师执业证号：" prop="safetyEngineerCertificate">
                                <Input v-model="formData.safetyEngineerCertificate"
                                       placeholder="请输入注册安全工程师执业证号，如果没有可以填写无"/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="工程类中级及以上专业技术资格名称：" prop="juniorSeniorProfressionalName">
                                <Input v-model="formData.juniorSeniorProfressionalName"
                                       placeholder="请输入工程类中级及以上专业技术资格名称，如果没有可以填写无"/>
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="工程类中级及以上专业技术资格专业：" prop="juniorSeniorProfressionalSkill">
                                <Input v-model="formData.juniorSeniorProfressionalSkill"
                                       placeholder="请输入工程类中级及以上专业技术资格专业，如果没有可以填写无"/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="专业技术资格证上传：">
                                <Upload
                                        multiple
                                        ref="technicalCertificateUpload"
                                        type="drag"
                                        name="files"
                                        :show-upload-list="false"
                                        :before-upload="beforeUpload2"
                                        :action="fileUrl2">
                                    <div style="padding: 20px 0">
                                        <Icon type="ios-cloud-upload" size="52" style="color: #F27874"></Icon>
                                        <p><span style="color: red">*</span>&nbsp;请上传专业技术资格证上传</p>
                                    </div>
                                </Upload>
                                <div v-show="fileList2.length>0" v-for="item in fileList2" :key='item'
                                     style="margin: 3px">
                                    <a @click="downloadFile(item)">{{ item.fileName }} {{ item.name }}</a>
                                    <Button type="text" icon="md-trash" @click="remove2(item)"
                                            style="margin-left: 5px;margin-bottom: 3px"/>
                                </div>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="聘任开始时间：" prop="appointmentStartDate">
                                <DatePicker v-model="formData.appointmentStartDate" type="date" placeholder="请选择聘任开始时间"
                                            style="width: 100%"></DatePicker>
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="聘任结束时间：" prop="appointmentEndDate">
                                <DatePicker v-model="formData.appointmentEndDate" type="date" placeholder="请选择聘任结束时间"
                                            style="width: 100%"></DatePicker>
                            </FormItem>
                        </i-col>
                    </Row>
                    <!--                    <Row :gutter="16">-->
                    <!--                        <i-col span="24">-->
                    <!--                            <FormItem label="任职时间：" prop="serviceTime" >-->
                    <!--                                <DatePicker v-model="formData.serviceTime" type="date" placeholder="请选择任职时间" style="width: 100%"></DatePicker>-->
                    <!--                            </FormItem>-->
                    <!--                        </i-col>-->
                    <!--                    </Row>-->
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="任职文件：" prop="workYear">
                                <Upload
                                        multiple
                                        ref="appointmentUpload"
                                        type="drag"
                                        name="files"
                                        :show-upload-list="false"
                                        :before-upload="beforeUpload3"
                                        :action="fileUrl3">
                                    <div style="padding: 20px 0">
                                        <Icon type="ios-cloud-upload" size="52" style="color: #F27874"></Icon>
                                        <p><span style="color: red">*</span>&nbsp;请上传任职文件</p>
                                    </div>
                                </Upload>
                                <div v-show="fileList3.length>0" v-for="item in fileList3" :key='item'
                                     style="margin: 3px">
                                    <a @click="downloadFile(item)">{{ item.fileName }} {{ item.name }}</a>
                                    <Button type="text" icon="md-trash" @click="remove3(item)"
                                            style="margin-left: 5px;margin-bottom: 3px"/>
                                </div>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="工作经历：" prop="workExperience">
                                <Input v-model="formData.securityDirectorInfo.workExperience" type="textarea" :rows="4" readonly
                                       placeholder="请输入工作经历"/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="单位安全生产管理机构名称：" prop="productionOrgId">
                                <orgDom ref="orgDom" @setOrgInfo="setOrgName"
                                        :orgInfo="{name: formData.securityDirectorInfo.orgName}"></orgDom>
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="所属二级集团公司：" prop="twoLevelOrgName">
                                <Input v-model="formData.twoLevelOrgName" placeholder="请输入注册安全工程师执业证号" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="企业类型：" prop="enterpriseType">
                                <CheckboxGroup v-model="formData.enterpriseType">
                                    <Checkbox v-for="(item, index) in enterpriseTypeList" :key="index"
                                              :label="item.codingCodeId">{{item.codingName}}
                                    </Checkbox>
                                </CheckboxGroup>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="其他需要说明的情况：" prop="remark">
                                <Input v-model="formData.remark" type="textarea" :rows="4" placeholder="请输入其他需要说明的情况"/>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button @click="saveInfo" class="ivu-btn-save" :loading="buttonLoading">确定</Button>
                <Button @click="modal1 = false" class="ivu-btn-cancel">取消</Button>
            </div>
        </Modal>
        <Modal v-model="modal2" width="800" :mask-closable="false" title="企业安全总监推荐表" footer-hide>
            <Form :label-width="100" ref="formInline" :model="formInline">
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="单位名称：">
                            <Input v-model="formInline2.orgName" placeholder="请填写公司名称"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="姓名：">
                            <Input v-model="formInline2.userName" placeholder="请填写总监姓名"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query" icon="md-search" @click="queryInfo">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancelInfo">重置</Button>
                        </div>
                    </i-col>
                </Row>
            </Form>
            <Table ref='table2' style="margin-top: 10px" :loading="loading2" border :columns="infoColumns"
                   no-data-text="没有查询到相关数据！"
                   :data="infos2" width="100%" height="400" highlight-row stripe size="small"></Table>
            <Row type="flex" justify="end">
                <i-col>
                    <Page :total="pagedata.total2" :current="pagedata.currentPage2" :page-size="pagedata.pageSize2"
                          @on-page-size-change="pageSizeChange2" @on-change="pageChange2"
                          :page-size-opts="pageSizeArray" show-total show-sizer show-elevator/>
                </i-col>
            </Row>
        </Modal>
        <Modal v-model="modal3" width="900" :mask-closable="false">
            <Tabs>
                <TabPane label="历史记录">
                    <Table ref='table3' :loading="loading3" border :columns="historyColumns" style="margin-top: 0px"
                           :data="infos3" width="100%" :height="500" highlight-row stripe size="small"></Table>
                </TabPane>
                <TabPane label="流程图">
                    <div style="height: 500px; overflow-y: auto; overflow-x: auto">
                        <img :src="imgUrl">
                    </div>
                </TabPane>
            </Tabs>
            <div slot="footer">
                <Button @click="modal3=false" class="ivu-btn-save">关闭</Button>
            </div>
        </Modal>
        <Modal v-model="modal4" width="800" :mask-closable="false" title="企业安全总监推荐上报">
            <Spin fix v-if="spinShow">
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>表单信息加载中，请稍后</div>
            </Spin>
            <Form ref="reportForm" :model="reportData" :rules="ruleCustom2" label-position="top">
                <Row :gutter="16">
                    <i-col span="24">
                        <FormItem label="企业领导：" prop="leaderId">
                            <Select v-model="reportData.leaderId">
                                <Option v-for="(item, index) in leaderList" :value="item.userId" :key="index">
                                    {{item.userName}}
                                    <span style="float:right;color:#ccc">{{item.orgName}} （{{item.positionName }}）</span>
                                </Option>
                            </Select>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
            <div slot="footer">
                <Button @click="reportInfo" class="ivu-btn-save" :loading="buttonLoading">上报</Button>
                <Button @click="modal1 = false" class="ivu-btn-cancel">取消</Button>
            </div>
        </Modal>
        <Modal v-model="modal5" width="900" :mask-closable="false" title="企业安全总监登记详情">
            <div :style="{height: divHeight, overflowY: 'auto', overflowX: 'hidden'}">
                <Form label-position="top">
                    <Row :gutter="16">
                        <i-col span="18">
                            <Row :gutter="16">
                                <i-col span="24">
                                    <FormItem label="单位名称：" >
                                        <Input type="text" v-model="formData.securityDirectorInfo.orgName" readonly/>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="12">
                                    <FormItem label="姓名：" >
                                        <Input type="text" v-model="formData.securityDirectorInfo.userName" readonly/>
                                    </FormItem>
                                </i-col>
                                <i-col span="12">
                                    <FormItem label="性别：" >
                                        <Input type="text" v-model="formData.securityDirectorInfo.gender" readonly/>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="12">
                                    <FormItem label="政治面貌：">
                                        <Input type="text"
                                               v-model="formData.securityDirectorInfo.politicalAffiliationName"
                                               readonly/>
                                    </FormItem>
                                </i-col>
                                <i-col span="12">
                                    <FormItem label="出生年月：">
                                        <DatePicker v-model="formData.securityDirectorInfo.birthday" type="date"
                                                    placeholder="请选择出生年月" style="width: 100%" readonly></DatePicker>
                                    </FormItem>
                                </i-col>
                            </Row>
                            <Row :gutter="16">
                                <i-col span="12">
                                    <FormItem label="手机号码：">
                                        <Input type="text" v-model="formData.securityDirectorInfo.phoneNumber"
                                               readonly/>
                                    </FormItem>
                                </i-col>
                                <i-col span="12">
                                    <FormItem label="学历：">
                                        <Input type="text" v-model="formData.securityDirectorInfo.educationName"
                                               readonly/>
                                    </FormItem>
                                </i-col>
                            </Row>

                        </i-col>
                        <i-col span="6">
                            <div style="width:100%;  height: 100%;">
                                <img :src="fileImgSrc" style="width:100%; height:100%"/>
                            </div>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="专业：">
                                <Input type="text" v-model="formData.securityDirectorInfo.major" placeholder="请输入专业"
                                       readonly/>
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="现职务（岗位）：" >
                                <Input type="text" v-model="formData.securityDirectorInfo.currentPosition"
                                       placeholder="请输入现职务（岗位）" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="工作年限：">
                                <Input type="number" v-model="formData.securityDirectorInfo.workYear"
                                       placeholder="请输入工作年限" readonly/>
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="现职务（岗位）工作年限：">
                                <Input type="number" v-model="formData.securityDirectorInfo.currentPositionWorkYear"
                                       placeholder="现职务（岗位）工作年限" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="与安全生产管理相关的工作年限：">
                                <Input type="number" v-model="formData.securityDirectorInfo.relevantWorkYear"
                                       placeholder="请输入与安全生产管理相关的工作年限" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="注册安全工程师职业资格证书编号：" >
                                <Input v-model="formData.safetyEngineerQualificationCertificateNo"
                                       placeholder="请输入注册安全工程师职业资格证书编号，如果没有证书，可以填写无" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="注册安全工程师职业资格证书：">
                                <div v-show="fileList.length>0" v-for="item in fileList" :key='item'
                                     style="margin: 3px">
                                    <a @click="downloadFile(item)">{{ item.fileName }} {{ item.name }}</a>
                                    <Button type="text" icon="md-trash" @click="remove1(item)"
                                            style="margin-left: 5px;margin-bottom: 3px"/>
                                </div>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="注册安全工程师执业证号：">
                                <Input v-model="formData.safetyEngineerCertificate"
                                       placeholder="请输入注册安全工程师执业证号，如果没有可以填写无" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="工程类中级及以上专业技术资格名称：" >
                                <Input v-model="formData.juniorSeniorProfressionalName"
                                       placeholder="请输入工程类中级及以上专业技术资格名称，如果没有可以填写无" readonly/>
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="工程类中级及以上专业技术资格专业：">
                                <Input v-model="formData.juniorSeniorProfressionalSkill"
                                       placeholder="请输入工程类中级及以上专业技术资格专业，如果没有可以填写无" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="专业技术资格证上传：">
                                <div v-show="fileList2.length>0" v-for="item in fileList2" :key='item'
                                     style="margin: 3px">
                                    <a @click="downloadFile(item)">{{ item.fileName }} {{ item.name }}</a>
                                    <Button type="text" icon="md-trash" @click="remove2(item)"
                                            style="margin-left: 5px;margin-bottom: 3px"/>
                                </div>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="聘任开始时间：">
                                <DatePicker v-model="formData.appointmentStartDate" type="date" placeholder="请选择聘任开始时间" readonly
                                            style="width: 100%"></DatePicker>
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="聘任结束时间：">
                                <DatePicker v-model="formData.appointmentEndDate" type="date" placeholder="请选择聘任结束时间" readonly
                                            style="width: 100%"></DatePicker>
                            </FormItem>
                        </i-col>
                    </Row>

                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="任职文件：" prop="workYear">
                                <div v-show="fileList3.length>0" v-for="item in fileList3" :key='item'
                                     style="margin: 3px">
                                    <a @click="downloadFile(item)">{{ item.fileName }} {{ item.name }}</a>
                                    <Button type="text" icon="md-trash" @click="remove3(item)"
                                            style="margin-left: 5px;margin-bottom: 3px"/>
                                </div>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="工作经历：">
                                <Input v-model="formData.securityDirectorInfo.workExperience" type="textarea" :rows="4" readonly
                                       placeholder="请输入工作经历"/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="12">
                            <FormItem label="单位安全生产管理机构名称：">
                                <Input v-model="formData.securityDirectorInfo.orgName" readonly />
                            </FormItem>
                        </i-col>
                        <i-col span="12">
                            <FormItem label="所属二级集团公司：">
                                <Input v-model="formData.twoLevelOrgName" placeholder="请输入注册安全工程师执业证号" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="企业类型：">
                                <CheckboxGroup v-model="formData.enterpriseType">
                                    <Checkbox v-for="(item, index) in enterpriseTypeList" :key="index"
                                              :label="item.codingCodeId">{{item.codingName}}
                                    </Checkbox>
                                </CheckboxGroup>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row :gutter="16">
                        <i-col span="24">
                            <FormItem label="其他需要说明的情况：">
                                <Input v-model="formData.remark" type="textarea" :rows="4" placeholder="请输入其他需要说明的情况" readonly/>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button @click="modal5 = false" class="ivu-btn-cancel">取消</Button>
            </div>
        </Modal>
        <Modal v-model="modal6" width="800" :mask-closable="false" title="企业安全总监述职报告">
            <Form ref="reportCustom" label-position="top">
                <Row :gutter="16">
                    <i-col span="24">
                        <Table :loading="loading4" style="margin-top: 0; margin-bottom: 10px" border
                               :columns="reportColumns" no-data-text="没有查询到相关数据！"
                               :data="reportInfos" width="100%" height="300" highlight-row stripe size="small"></Table>
                    </i-col>
                </Row>
                <Row :gutter="16">
                    <i-col span="12">
                        <FormItem label="述职报告年份：">
                            <DatePicker type="year" v-model="checkYear" format="yyyy" placeholder="请选择补填年份" style="width:200px" :options="dateOptions"></DatePicker>
                        </FormItem>
                    </i-col>
                    <i-col span="24">
                        <FormItem label="述职报告：">
                            <Upload
                                    multiple
                                    ref="employmentReportUpload"
                                    type="drag"
                                    name="files"
                                    :show-upload-list="false"
                                    :before-upload="beforeUpload4"
                                    :action="fileUrl4">
                                <div style="padding: 20px 0">
                                    <Icon type="ios-cloud-upload" size="52" style="color: #F27874"></Icon>
                                    <p><span style="color: red">*</span>&nbsp;请上传述职报告</p>
                                </div>
                            </Upload>
                            <div v-show="fileList4.length>0" v-for="item in fileList4" :key='item' style="margin: 3px">
                                <a @click="downloadFile(item)">{{ item.fileName }} {{ item.name }}</a>
                                <Button type="text" icon="md-trash" @click="remove4(item)"
                                        style="margin-left: 5px;margin-bottom: 3px"/>
                            </div>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
            <div slot="footer">
                <Button @click="saveReport" class="ivu-btn-save" :loading="buttonLoading">确定</Button>
                <Button @click="modal6 = false" class="ivu-btn-cancel">取消</Button>
            </div>
        </Modal>
        <Modal v-model="modal7" width="800" :mask-closable="false" title="述职报告批量下载">
            <Form :label-width="130" ref="formInline3" :model="formInline3">
                <Row :gutter="16" class="query-form2">
                    <i-col span="12">
                        <FormItem label="请选择上传年份：">
                            <DatePicker type="year" placeholder="请选择上传年份" style="width: 100%" v-model="formInline3.year"></DatePicker>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
            <Table ref="selection" style="margin-top: 10px" border :columns="columns2" @on-select="batchSelection" @on-select-all="allSelection" @on-select-all-cancel="cancelSelect"
                   no-data-text="没有查询到相关数据！"
                   :data="infos4" width="100%" :loading="loading5" :height="tableHeight2" highlight-row stripe size="small"></Table>
            <div slot="footer">
                <Button @click="batchDownload" class="ivu-btn-save" :loading="buttonLoading">下载</Button>
                <Button @click="modal7 = false" class="ivu-btn-cancel">取消</Button>
            </div>
        </Modal>
        <div v-show="downloading"
             style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999;background-color:#000000;opacity:0.5;">
            <svg-bar style="position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px"
                     :options="options" :value="batchProcess"></svg-bar>
        </div>
    </div>
</template>

<script>

    import svgBar from 'svg-progress-bar'
    import {Api} from '../../../api'
    import {sessionStorage} from '@/common/cacheUtils.js';
    import orgDom from "@/components/input-org.vue";
    import userDom from "@/components/input-user.vue";

    export default {
        name: "securityDirectorRegister",
        components: {
            orgDom,
            userDom,
            svgBar
        },
        data() {
            return {
                checkYear: new Date(),
                currentYear: '',
                ifSpin: false,
                downloading: false,
                batchProcess: 0,
                fileImgSrc: '',
                imgUrl: '',
                divHeight: '',
                buttonLoading: false,
                loading: false,
                loading2: false,
                loading3: false,
                loading4: false,
                loading5: false,
                formInline: {},
                formInline2: {},
                formInline3: {},
                tableHeight: '',
                tableHeight2: '',
                titleName: '',
                isUpdate: false,
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                    total2: 0,
                    pageSize2: 10,
                    currentPage2: 1,
                },
                pageSizeArray: [10, 20, 50],
                formData: {
                    securityDirectorInfo: {}
                },
                modal1: false,
                modal2: false,
                modal3: false,
                modal4: false,
                modal5: false,
                modal6: false,
                modal7: false,
                userInfo: sessionStorage('userId').getObject('userId'),
                columns: [
                    {
                        title: '序号',
                        width: 80,
                        align: 'center',
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata
                                .pageSize + 1);
                        }
                    },
                    {
                        title: '单位名称',
                        align: 'center',
                        key: 'orgName',
                        minWidth: 200,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.orgName || '--')
                            ]);
                        }
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'userName',
                        minWidth: 90,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.userName || '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 130,
                        title: '聘任开始时间',
                        align: 'center',
                        key: 'appointmentStartDate',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.appointmentStartDate != null ? this.formatDate(new Date(params.row.appointmentStartDate), 'yyyy-MM-dd') : '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 130,
                        title: '聘任结束时间',
                        align: 'center',
                        key: 'appointmentEndDate',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.appointmentEndDate != null ? this.formatDate(new Date(params.row.appointmentEndDate), 'yyyy-MM-dd') : '--')
                            ]);
                        }
                    },
                    {
                        title: '性别',
                        align: 'center',
                        key: 'gender',
                        minWidth: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.gender || '--')
                            ]);
                        }
                    },
                    {
                        title: '政治面貌',
                        align: 'center',
                        key: 'politicalAffiliationName',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.politicalAffiliationName || '--')
                            ]);
                        }
                    },
                    {
                        title: '出生年月',
                        align: 'center',
                        key: 'birthday',
                        minWidth: 140,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.birthday != null ? this.formatDate(new Date(params.row.securityDirectorInfo.birthday), 'yyyy-MM-dd') : '--')
                            ]);
                        }
                    },
                    {
                        title: '手机号码',
                        align: 'center',
                        key: 'phoneNumber',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.phoneNumber || '--')
                            ]);
                        }
                    },
                    {
                        title: '学历',
                        align: 'center',
                        key: 'educationName',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.educationName || '--')
                            ]);
                        }
                    },
                    {
                        title: '专业',
                        align: 'center',
                        key: 'major',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.major || '--')
                            ]);
                        }
                    },
                    {
                        title: '现职务（岗位）',
                        align: 'center',
                        key: 'currentPosition',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.currentPosition || '--')
                            ]);
                        }
                    },
                    {
                        title: '工作年限',
                        align: 'center',
                        key: 'workYear',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.workYear || '--')
                            ]);
                        }
                    },
                    {
                        title: '现岗位工作年限',
                        align: 'center',
                        key: 'currentPositionWorkYear',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.currentPositionWorkYear || '--')
                            ]);
                        }
                    },
                    {
                        title: '安全工作年限',
                        align: 'center',
                        key: 'relevantWorkYear',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.relevantWorkYear || '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 180,
                        title: '任职资格',
                        align: 'center',
                        key: 'groupOpinion',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.groupOpinion || '--')
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        minWidth: 240,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.updateRow(params.row);
                                            this.$http.get(Api.uploadPTWFiles + '/' + params.row.id + '/files/picture', {
                                                params: {field: 'seal'},
                                            }).then((res) => {
                                                if (res.data.data != undefined) {
                                                    this.sealFile = res.data.data;
                                                }
                                            })
                                            this.modal5 = true;

                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.titleName = "修改";
                                            this.isUpdate = true;
                                            this.updateRow(params.row);
                                            this.modal1 = true;
                                        }
                                    }
                                }, '修改'),
                                // h('Divider', {
                                //     props: {
                                //         type: 'vertical',
                                //     }
                                // }, ''),
                                // h('A', {
                                //     props: {
                                //         type: 'primary',
                                //         size: 'small'
                                //     },
                                //     style: {
                                //         fontSize: '14px',
                                //         color: params.row.status == "1" || params.row.status == "2" || params.row.status == "3" || params.row.status == "5"? '#d0d0d0' : '',
                                //         pointerEvents: params.row.status == "1" || params.row.status == "2" || params.row.status == "3" || params.row.status == "5" ? 'none' : ''
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.$set(this.reportData, 'workId', params.row.id);
                                //             this.formData = JSON.parse(JSON.stringify(params.row));
                                //             this.queryLeader();
                                //             this.modal4 = true;
                                //         }
                                //     }
                                // }, '上报'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.addReport(params.row.id);
                                        }
                                    }
                                }, '述职报告'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: 'red',
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteRow(params.row);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                columns2: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '单位名称',
                        align: 'center',
                        key: 'orgName',
                        minWidth: 200,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.orgName || '--')
                            ]);
                        }
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'userName',
                        minWidth: 90,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.securityDirectorInfo.userName || '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 130,
                        title: '聘任开始时间',
                        align: 'center',
                        key: 'appointmentStartDate',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.appointmentStartDate != null ? this.formatDate(new Date(params.row.appointmentStartDate), 'yyyy-MM-dd') : '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 130,
                        title: '聘任开始时间',
                        align: 'center',
                        key: 'appointmentEndDate',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.appointmentEndDate != null ? this.formatDate(new Date(params.row.appointmentEndDate), 'yyyy-MM-dd') : '--')
                            ]);
                        }
                    },
                ],
                infos: [],
                infos4: [],
                infoColumns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '单位名称',
                        align: 'center',
                        key: 'orgName',
                        minWidth: 200,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.orgName || '--')
                            ]);
                        }
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'userName',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.userName || '--')
                            ]);
                        }
                    },
                    {
                        title: '性别',
                        align: 'center',
                        key: 'gender',
                        minWidth: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.gender || '--')
                            ]);
                        }
                    },
                    {
                        title: '政治面貌',
                        align: 'center',
                        key: 'politicalAffiliationName',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.politicalAffiliationName || '--')
                            ]);
                        }
                    },
                    {
                        title: '出生年月',
                        align: 'center',
                        key: 'birthday',
                        minWidth: 140,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.birthday != null ? this.formatDate(new Date(params.row.birthday), 'yyyy-MM-dd') : '--')
                            ]);
                        }
                    },
                    {
                        title: '手机号码',
                        align: 'center',
                        key: 'phoneNumber',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.phoneNumber || '--')
                            ]);
                        }
                    },
                    {
                        title: '学历',
                        align: 'center',
                        key: 'educationName',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.educationName || '--')
                            ]);
                        }
                    },
                    {
                        title: '专业',
                        align: 'center',
                        key: 'major',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.major || '--')
                            ]);
                        }
                    },
                    {
                        title: '现职务（岗位）',
                        align: 'center',
                        key: 'currentPosition',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.currentPosition || '--')
                            ]);
                        }
                    },
                    {
                        title: '工作年限',
                        align: 'center',
                        key: 'workYear',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.workYear || '--')
                            ]);
                        }
                    },
                    {
                        title: '现岗位工作年限',
                        align: 'center',
                        key: 'currentPositionWorkYear',
                        minWidth: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.currentPositionWorkYear || '--')
                            ]);
                        }
                    },
                    {
                        title: '安全工作年限',
                        align: 'center',
                        key: 'relevantWorkYear',
                        minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.relevantWorkYear || '--')
                            ]);
                        }
                    },
                    {
                        minWidth: 180,
                        title: '任职资格',
                        align: 'center',
                        key: 'groupOpinion',
                        tooltip: true,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.groupOpinion || '--')
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        minWidth: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            // if(this.userInfo.userId == params.row.userId ){
                                            this.modal2 = false;
                                            this.modal1 = true;
                                            this.formData.securityDirectorInfo = JSON.parse(JSON.stringify(params.row));
                                            this.formData.infoId = params.row.id;
                                            this.formData.productionOrgId = params.row.orgId;
                                            this.formData.productionOrgName = params.row.orgName;
                                            this.formData.workExperience = params.row.workExperience;
                                            if (params.row.appointmentStartDate != null) {
                                                this.formData.appointmentStartDate = new Date(params.row.appointmentStartDate);
                                            }
                                            if (params.row.appointmentEndDate != null) {
                                                this.formData.appointmentEndDate = new Date(params.row.appointmentEndDate);
                                            }


                                            this.queryTwolevelOrg(this.formData.securityDirectorInfo.orgId);
                                            this.$http.get(Api.uploadPTWFiles + '/' + this.formData.infoId + '/files/picture', {params: {field: 'photo'}}).then((res) => {
                                                if (res.data.data != undefined) {
                                                    res.data.data.forEach(item => {
                                                        this.fileImgSrc = item.picture;
                                                    })
                                                }
                                            });
                                            setTimeout(() => {
                                                this.$refs.orgDom.setCurrentOrg();
                                            }, 300);
                                            // }else{
                                            //     this.$Notice.error({
                                            //         title: '只有总监本人可以进行登记！'
                                            //     });
                                            // }
                                        }
                                    }
                                }, '选择')
                            ]);
                        }
                    }
                ],
                infos2: [],
                fileUrl: '',
                fileUrl2: '',
                fileUrl3: '',
                fileUrl4: '',
                enterpriseTypeList: [],
                historyColumns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        width: 180,
                        title: '审批时间',
                        key: 'endTime',
                        align: 'center',
                    },
                    {
                        width: 185,
                        title: '节点名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        width: 120,
                        title: '审批人',
                        key: 'userName',
                        align: 'center'
                    },
                    {
                        width: 100,
                        title: '审批意见',
                        key: 'route',
                        align: 'center'
                    },
                    {
                        width: 200,
                        title: '备注',
                        key: 'opinions',
                        align: 'center'
                    },
                ],
                infos3: [],
                fileList: [],
                fileList2: [],
                fileList3: [],
                fileList4: [],
                reportData: {},
                ruleCustom2: {
                    leaderId: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ]
                },
                leaderList: [],
                ruleCustom: {
                    safetyEngineerQualificationCertificateNo: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ],
                    safetyEngineerCertificate: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ],
                    juniorSeniorProfressionalName: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ],
                    juniorSeniorProfressionalSkill: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ],
                    serviceTime: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change',
                            type: 'date'
                        }
                    ],
                    appointmentStartDate: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change',
                            type: 'date'
                        }
                    ],
                    appointmentEndDate: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change',
                            type: 'date'
                        }
                    ],
                    workExperience: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change',
                        }
                    ],
                    productionOrgId: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change',
                        }
                    ],
                    twoLevelOrgName: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change',
                        }
                    ],
                    enterpriseType: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change',
                        }
                    ]
                },
                reportColumns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        title: '述职年份',
                        align: 'center',
                        key: 'year',
                        minWidth: 200,
                    },
                    {
                        title: '上传时间',
                        align: 'center',
                        key: 'createDate',
                        minWidth: 200,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.createDate != null ? this.formatDate(new Date(params.row.createDate), 'yyyy-MM-dd') : '--')
                            ]);
                        }
                    },
                    {
                        title: '创建人',
                        align: 'center',
                        key: 'createUserName',
                        minWidth: 200,
                    },
                    {
                        title: '附件名称',
                        align: 'center',
                        key: 'createDate',
                        minWidth: 200,

                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.$http.get(Api.uploadPTWFiles + '/' + params.row.id + '/files/guideFile', {params: {field: 'employmentReport'}}).then((res) => {
                                                this.downloadFile(res.data.data[0]);
                                            });
                                        }
                                    }
                                }, params.row.fileName)
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        minWidth: 80,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: 'red',
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteReprotRow(params.row);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                reportInfos: [],
                fileForm: {},
                batchArray: [],
                dateOptions: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now() - 86400000;
                    }
                }
            }
        },
        computed: {
            options: function() {
                return {
                    radius: 50,//大小
                    duration: 2,//变化时间长度
                    circleWidth: 5,//圆环宽度
                    pathColors: ['#A2A2A2', '#FA5657'], //圆环 底色和 上面的颜色
                    circleLineCap: 'round',//进度条 形状  圆环 或者矩形
                    text: function (value) {
                        return this.htmlifyNumber(value) + '<span style="font-size: 0.4em;">%</span>';
                    },
                    textColor: 'rgb(33, 150, 243)'
                }
            }
        },
        mounted() {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.tableHeight2 = window.innerHeight - this.$refs.table.$el.offsetTop - 220;
            this.divHeight = window.innerHeight - 150 + 'px';
            this.selectCodingSort();
            this.query();
        },
        watch: {
            "modal1": function (qw, er) {
                if (!qw) {
                    this.formData = {
                        securityDirectorInfo: {}
                    };
                    this.fileList = [];
                    this.fileList2 = [];
                    this.fileList3 = [];
                }
            },
            "modal5": function (qw, er) {
                if (!qw) {
                    this.formData = {
                        securityDirectorInfo: {}
                    };
                    this.fileList = [];
                    this.fileList2 = [];
                    this.fileList3 = [];
                }
            },
            "modal6": function (qw, er) {
                if (!qw) {
                    this.fileForm = {};
                    this.reportInfos = [];
                    this.fileList4 = [];
                }
            },
            "modal7": function (qw, er) {
                if (!qw) {
                    this.formInline3 = {};
                    this.infos4 = [];
                }
            }
        },
        methods: {
            selectCodingSort() {
                this.$http.get(Api.queryCodeDetailBySortId + '/SEC-00001', {params: {}}).then((res) => {
                    this.enterpriseTypeList = res.data.data;
                });
            },
            query() {
                this.loading = true;
                let data = {
                    startPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                    productionOrgId: this.userInfo.companyId
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.securityDirectorRegister, {
                    params: data
                }).then(function (res) {
                    this.infos = res.data.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.loading = false;
                }, function (res) {
                    this.$Message.error('请求失败');
                });
            },
            cancel() {
                this.formInline = {};
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            addInfo() {
                this.modal2 = true;
                this.titleName = '新增';
                this.isUpdate = false;
                this.formData.id = this.uuid();
                this.formData.createUserId = this.userInfo.userId;
                this.formData.userName = this.userInfo.userName;
                this.formData.contactNumber = this.userInfo.mobileNumber;

                this.fileUrl = Api.uploadPTWFiles + '/' + this.formData.id + '/files/guideFile/qualification';
                this.fileUrl2 = Api.uploadPTWFiles + '/' + this.formData.id + '/files/guideFile/technicalCertificate';
                this.fileUrl3 = Api.uploadPTWFiles + '/' + this.formData.id + '/files/guideFile/appointment';
                this.queryInfo();
            },
            updateRow(row) {
                this.formData = JSON.parse(JSON.stringify(row));
                if (this.formData.enterpriseType != undefined) {
                    this.$set(this.formData, 'enterpriseType', this.formData.enterpriseType.split(','));
                }
                this.fileUrl = Api.uploadPTWFiles + '/' + this.formData.id + '/files/guideFile/qualification';
                this.fileUrl2 = Api.uploadPTWFiles + '/' + this.formData.id + '/files/guideFile/technicalCertificate';
                this.fileUrl3 = Api.uploadPTWFiles + '/' + this.formData.id + '/files/guideFile/appointment';
                this.$http.get(Api.uploadPTWFiles + '/' + this.formData.infoId + '/files/picture', {params: {field: 'photo'}}).then((res) => {
                    if (res.data.data != undefined) {
                        if (res.data.data != undefined) {
                            res.data.data.forEach(item => {
                                this.fileImgSrc = item.picture;
                            })
                        }
                    }
                });
                this.$http.get(Api.uploadPTWFiles + '/' + this.formData.id + '/files/guideFile').then((res) => {
                    if (res.data.data != undefined) {
                        res.data.data.forEach(item => {
                            if (item.field == 'qualification') {
                                this.fileList.push(item);
                            } else if (item.field == 'technicalCertificate') {
                                this.fileList2.push(item);
                            } else if (item.field == 'appointment') {
                                this.fileList3.push(item);
                            }
                        })
                    }
                });
                setTimeout(() => {
                    this.$refs.orgDom.setCurrentOrg();
                }, 300);
            },
            queryInfo() {
                this.loading2 = true;
                let data = {
                    startPage: this.pagedata.currentPage2,
                    pageSize: this.pagedata.pageSize2,
                    status: 3,
                    orgId: this.userInfo.twoLevelOrgId == null ? this.userInfo.companyId : this.userInfo.twoLevelOrgId
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline2)));
                this.$http.get(Api.securityDirectorInfo, {
                    params: data
                }).then(function (res) {
                    this.infos2 = res.data.data.data;
                    this.pagedata.total2 = res.data.data.totalSize;
                    this.loading2 = false;
                }, function (res) {
                    this.$Message.error('请求失败');
                });
            },
            cancelInfo() {
                this.formInline2 = {};
                this.queryInfo();
            },
            pageSizeChange2(pageSize) {
                this.pagedata.pageSize2 = pageSize;
                this.queryInfo();
            },
            pageChange2(pageNum) {
                this.pagedata.currentPage2 = pageNum;
                this.queryInfo();
            },
            setOrgName(data) {
                this.$set(this.formData, 'productionOrgId', data.orgId);
                this.$set(this.formData, 'productionOrgName', data.orgName);
                this.queryTwolevelOrg(data.orgId);
            },
            uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 32; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                let uuid = s.join("");
                return uuid
            },
            formatDate(date, fmt) {
                if (typeof date == 'string') {
                    return date;
                }
                if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";
                if (!date || date == null) return null;
                let o = {
                    'M+': date.getMonth() + 1, // 月份
                    'd+': date.getDate(), // 日
                    'h+': date.getHours(), // 小时
                    'm+': date.getMinutes(), // 分
                    's+': date.getSeconds(), // 秒
                    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
                    'S': date.getMilliseconds() // 毫秒
                }
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
                for (let k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                }
                return fmt
            },
            saveInfo() {
                this.$refs['formCustom'].validate((valid) => {
                    if (this.formData.enterpriseType != undefined) {
                        this.formData.enterpriseType = this.formData.enterpriseType.toLocaleString();
                    }
                    if (valid) {
                        if (this.formData.safetyEngineerQualificationCertificateNo != '无' && this.fileList.length == 0) {
                            this.$Notice.error({
                                title: '请上传注册安全工程师职业资格证书！'
                            });
                            return;
                        }
                        if (this.fileList3.length == 0) {
                            this.$Notice.error({
                                title: '请上传任职文件！'
                            });
                            return;
                        }
                        this.fileList.map((i) => {
                            if (i.operation == 'add') {
                                this.$refs.qualificationUpload.post(i);
                            }
                        });
                        this.fileList2.map((i) => {
                            if (i.operation == 'add') {
                                this.$refs.technicalCertificateUpload.post(i);
                            }
                        });
                        this.fileList3.map((i) => {
                            if (i.operation == 'add') {
                                this.$refs.appointmentUpload.post(i);
                            }
                        });
                        this.buttonLoading = true;
                        if (this.isUpdate) {
                            this.$http.put(Api.securityDirectorRegister, this.formData).then(function (response) {
                                this.buttonLoading = false;
                                this.modal1 = false;
                                this.query();
                                this.$Message.success({content: '保存成功', duration: 4});
                            });
                        } else {
                            this.$http.post(Api.securityDirectorRegister, this.formData).then(function (response) {
                                this.buttonLoading = false;
                                this.modal1 = false;
                                this.query();
                                this.$Message.success({content: '保存成功', duration: 4});
                            });
                        }
                    }
                });
            },
            deleteRow(row) {
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>确定删除该条信息</p>',
                    okText: '确认',
                    onOk: () => {
                        this.$http.delete(Api.securityDirectorRegister, {
                            params: {
                                id: row.id,
                                updateUserId: this.userInfo.userId,
                                updateDate: new Date()
                            }
                        }).then((res) => {
                            this.$Message.success({content: '删除成功', duration: 4});
                            this.query();
                        })
                    },
                    cancelText: '取消'
                });
            },
            queryHistory(row) {
                this.loading3 = true;
                this.$http.get(Api.getHistory + '/' + row.procinstId, {params: {}}).then((res) => {
                    this.infos3 = res.data;
                    this.loading3 = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            beforeUpload(file) {
                file.operation = 'add';
                this.fileList.push(file);
                return false;
            },
            beforeUpload2(file) {
                file.operation = 'add';
                this.fileList2.push(file);
                return false;
            },
            beforeUpload3(file) {
                file.operation = 'add';
                this.fileList3.push(file);
                return false;
            },

            beforeUpload4(file) {
                file.operation = 'add';
                this.fileList4.push(file);
                return false;
            },
            downloadFile(file) {
                let url = Api.uploadPTWFiles + '/file/' + file.id;
                this.$http.get(url, {
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = file.fileName //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },
            remove1(file) {
                this.fileList.splice(this.fileList.indexOf(file), 1);
                if (file.id != undefined) {
                    let url = Api.uploadMongoFile + '/' + file.id;
                    this.$http.delete(url);
                }
            },
            remove2(file) {
                this.fileList2.splice(this.fileList2.indexOf(file), 1);
                if (file.id != undefined) {
                    let url = Api.uploadMongoFile + '/' + file.id;
                    this.$http.delete(url);
                }
            },
            remove3(file) {
                this.fileList3.splice(this.fileList3.indexOf(file), 1);
                if (file.id != undefined) {
                    let url = Api.uploadMongoFile + '/' + file.id;
                    this.$http.delete(url);
                }
            },
            remove4(file) {
                this.fileList4.splice(this.fileList4.indexOf(file), 1);
                if (file.id != undefined) {
                    let url = Api.uploadMongoFile + '/' + file.id;
                    this.$http.delete(url);
                }
            },
            queryLeader() {
                this.spinShow = true;
                this.$http.get(Api.securityDirectorInfo + '/leader', {
                    params: {
                        companyId: this.formData.productionOrgId,
                        orgName: this.formData.productionOrgName
                    }
                }).then((res) => {
                    this.leaderList = res.data.data;
                    this.spinShow = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reportInfo() {
                this.$refs['reportForm'].validate((valid) => {
                    if (valid) {
                        let data = {
                            createUserId: this.userInfo.userId,
                            user1: this.reportData.leaderId,
                            key: 'securityDirectorRegister',
                            workId: this.reportData.workId,
                            userName: this.userInfo.userName,
                            formKey: 'securityDirectorRegisterForm'
                        }
                        this.buttonLoading = true;
                        this.$http.post(Api.submit, data).then(function (response) {
                            this.sendMessage(data.user1);
                            this.buttonLoading = false;
                            if (response.data.status == 200) {
                                this.$Message.success({content: '保存成功', duration: 4});
                                this.query();
                            } else {
                                this.$Message.error({content: response.data.msg, duration: 4});
                            }
                            this.modal4 = false;
                        });
                    }
                })
            },
            queryTwolevelOrg(orgId) {
                this.$http.get(Api.securityDirectorInfo + '/twoLevelOrg', {params: {companyId: orgId}}).then((res) => {
                    if (res.data.status == 200) {
                        if (res.data.data != null) {
                            this.$set(this.formData, 'twoLevelOrgId', res.data.data.orgId);
                            this.$set(this.formData, 'twoLevelOrgName', res.data.data.orgName);
                        }
                    }
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            sendMessage(userId) {
                let data = {userId: userId, content: "您有一条企业安全总监登记表要审批，请登录安全环保信息平台进行审批"};
                this.$http.post(Api.sendMessage, data);
            },
            exportExcel() {
                let data = {
                    productionOrgId: this.userInfo.companyId
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline)));
                this.ifSpin = true;
                this.$http.get(Api.securityDirectorInfo + '/register/excel', {
                    params: data,
                    responseType: 'arraybuffer'
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    })
                    aLink.href = URL.createObjectURL(blob);
                    aLink.download = "安全总监登记表(" + this.formatDate(new Date(), "yyyy-MM-dd") + ").xlsx" //标题
                    aLink.click();
                    document.body.appendChild(aLink);
                    this.ifSpin = false;
                }, function (res) {
                    this.$Message.error('生成失败');
                    this.ifSpin = false;
                })
            },
            queryReport(id) {
                this.loading4 = true;
                this.$http.get(Api.securityDirectorRegister + '/file', {
                    params: {
                        registerId: id
                    }
                }).then(function (res) {
                    this.reportInfos = res.data.data;
                    this.loading4 = false;
                }, function (res) {
                    this.$Message.error('请求失败');
                });
            },
            addReport(id) {
                this.modal6 = true;
                this.fileForm = {
                    registerId: id,
                    id: this.uuid(),
                    createUserName: this.userInfo.userName
                };
                this.fileUrl4 = Api.uploadPTWFiles + '/' + this.fileForm.id + '/files/guideFile/employmentReport';
                this.queryReport(id);
            },
            saveReport() {
                if (this.fileList4.length == 0) {
                    this.$Notice.error({
                        title: '请上传述职报告文件！'
                    });
                    return;
                }
                if(this.checkYear == ''){
                    this.$Message.error('请选择述职报告年份');
                    return;
                }
                this.fileForm.year = this.checkYear.getFullYear();
                this.buttonLoading = false;
                this.fileList4.map((i) => {
                    if (i.operation == 'add') {
                        this.$refs.employmentReportUpload.post(i);
                        this.$set(this.fileForm, 'fileName', i.name);
                        this.$http.post(Api.securityDirectorRegister + '/file', this.fileForm).then(function (response) {
                            if (response.data.status == 200) {
                                this.$Message.success({content: '保存成功', duration: 4});
                            } else {
                                this.$Message.error({content: response.data.msg, duration: 4});
                            }
                        });
                    }
                });
                this.modal6 = false;
            },
            deleteReprotRow(row) {
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>确定删除该条信息</p>',
                    okText: '确认',
                    onOk: () => {
                        this.$http.delete(Api.securityDirectorRegister + '/file', {
                            params: {
                                id: row.id
                            }
                        }).then((res) => {
                            this.$Message.success({content: '删除成功', duration: 4});
                            this.queryReport(row.registerId);
                        })
                    },
                    cancelText: '取消'
                });
            },
            batchSelection(selection, row){
                this.batchArray = selection;
            },
            allSelection(selection){
                this.batchArray = selection;
            },
            cancelSelect(selection){
                this.batchArray = selection;
            },
            batchFile() {
                this.formInline3.year = new Date();
                this.modal7 = true;
                let data = {
                    productionOrgId: this.userInfo.companyId
                };
                this.loading5 = true;
                data = Object.assign(data, JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.securityDirectorRegister + '/noPage', {
                    params: data
                }).then(function (res) {
                    this.infos4 = res.data.data;
                    this.loading5 = false;
                }, function (res) {
                    this.$Message.error('请求失败');
                });
            },
            batchDownload(){
                let registerId = '';
                if(this.batchArray.length == 0){
                    this.$Message.error('请选择至少选择一条数据');
                    return;
                }
                this.batchArray.map((i=>{
                    registerId +=  i.id + ',';
                }))
                this.$http.get(Api.securityDirectorRegister + '/fileId', {
                    params: {
                        registerId: registerId,
                        year: this.formInline3.year.getFullYear()
                    }
                }).then(function (res) {
                    this.downloadZip(res.data.data);
                }, function (res) {
                    this.$Message.error('请求失败');
                });
            },
            downloadZip(infos){
                this.downloading = true;
                let url = Api.mongoBatchDownload;
                if(infos.length == 0){
                    this.$Message.error('请选择得数据并未上传述职报告，请重新选择');
                    return;
                }
                let ids = [];
                let fileNames = [];

                infos.forEach(item=>{
                    ids.push(item.id);
                    fileNames.push(item.orgName + '-' + item.userName+ '-' +this.formInline3.year.getFullYear());
                    // url += ("ids="+item.id + "&fileNames=" +  item.orgName + '-' + item.userName+ '-' +this.formInline3.year.getFullYear() + "&")
                })
                let _this = this;
                let formData = new FormData();
                formData.append("ids", ids); // 文件对象
                formData.append("fileNames", fileNames); // 文件对象
                this.$http.post(url, formData, {
                    responseType: 'blob',      //告诉服务器我们需要的响应格式
                    progress:function(e){
                        console.log(100 * (e.loaded / e.total))
                        _this.batchProcess = 100 * (e.loaded / e.total);
                        if(_this.batchProcess == 100){
                            _this.downloading = false;
                        }
                    }
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: 'application/zip'     //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = this.formatDate(new Date(), 'yyyyMMddhhmmss') + ".zip";
                    aLink.click()
                    document.body.appendChild(aLink)
                }, function(res){
                    this.$Loading.error();
                })
            }

        }
    }
</script>

<style scoped>
    @import '../../../index.css';
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
</style>
